<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            background-color: #f00;
        }



        dl {
            /* display: none; */


            /* height: 0; */
            overflow: hidden;
            transition: .2s;
        }

        /* p:hover {
            background-color: #f00;
        }

        p:hover+dl {
            height: 200px;
        } */
    </style>
</head>

<body>

    <ul>
        <li>
            <p>day14</p>
            <dl>
                <dd>11</dd>
                <dd>11</dd>
            </dl>
        </li>
        <li>
            <p>day15</p>
            <dl>
                <dd>11</dd>
                <dd>11</dd>
                <dd>11</dd>
                <dd>11</dd>
            </dl>
        </li>
        <li>
            <p>day16</p>
            <dl>
                <dd>11</dd>
                <dd>11</dd>
                <dd>11</dd>
            </dl>
        </li>
    </ul>

    <script>

        // const oPs = document.querySelectorAll('p');

        // oPs.forEach(v => {
        //     v.onclick = function () {
        //         if (this.classList.contains('active')) {
        //             this.classList.remove('active');
        //             this.nextElementSibling.classList.remove('show')
        //         } else {
        //             this.classList.add('active');
        //             this.nextElementSibling.classList.add('show')
        //         }
        //     }
        // })

        const oPs = document.querySelectorAll('p');

        oPs.forEach(v => {
            // 通过自定义属性的方式把dl的高度绑定上 
            v.setAttribute('h', v.nextElementSibling.offsetHeight);
            // 之后再隐藏元素
            v.nextElementSibling.style.height = 0;
            v.onclick = function () {
                if (this.classList.contains('active')) {
                    this.classList.remove('active');
                    this.nextElementSibling.style.height = '0'
                } else {
                    this.classList.add('active');
                    this.nextElementSibling.style.height = this.getAttribute('h') + 'px';
                }
            }
        })


    </script>

</body>

</html>